<template>
  <div class="contents">
    <div class="login-content">
      <div class="login-left">
        <img src="../assets/dn.png" alt class="computer" />
        <div class="endfont">Digital Team Room</div>
      </div>
      <div class="login-right">
        <img src="../assets/logo.png" alt class="logo-img" />
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="0"
          class="demo-ruleForm"
          style="width: 220px;margin: 0 auto"
        >
          <el-form-item prop="name" label-width="0">
            <el-input v-model="ruleForm.name" prefix-icon="el-icon-user" style="width: 220px;"></el-input>
          </el-form-item>
          <el-form-item prop="password" label-width="0">
            <el-input
              v-model="ruleForm.password"
              type="password"
              prefix-icon="el-icon-lock"
              style="width: 220px;"
              @keyup.enter.native="submitForm('ruleForm')"
            ></el-input>
          </el-form-item>
          <el-form-item prop="checked" label-width="0" style="text-align: left;margin-top: -20px">
            <el-checkbox v-model="ruleForm.checkeds">记住密码</el-checkbox>
          </el-form-item>
          <el-form-item label-width="0" style="margin-top: -10px;">
            <el-button type="primary" @click="submitForm('ruleForm')" class="submitForm">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      ruleForm: {
        name: "",
        password: "",
        checkeds: "",
        fullscreen: false
      },
      rules: {
        name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }]
      }
    };
  },
  mounted() {
    localStorage.setItem("token", "");
    localStorage.setItem(
      "userInfo",
      JSON.stringify({ data: {}, userInfo: { organName: "" } })
    );
  },
  methods: {
    submitForm(formName) {
      let that = this;
      let element = document.documentElement;
      if (that.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen();
        }
      }
      that.fullscreen = !that.fullscreen;

      console.log(localStorage.getItem("token"));
      that.$refs[formName].validate(valid => {
        if (valid) {
          const loading = that.$loading({
            lock: true,
            text: "加载中...",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)"
          });
          let formDate = new FormData();
          formDate.append("userName", that.ruleForm.name);
          formDate.append("password", that.ruleForm.password);
          that
            .$post("login", formDate)
            .then(response => {
              console.log(response.data);
              loading.close();
              if (response.resultCode===1) {
                localStorage.setItem("userInfo", JSON.stringify(response.data));
                localStorage.setItem("token", response.data.token);
                // that.$message({
                //   message: "登录成功",
                //   type: 'success'
                // });
                // console.log(this.$router);
                window.location.href = "/#/packaging";
                // window.open("/#/packaging");
              } else {
                that.$message.error(response.msg);
              }
            })
            .catch(err => {
              loading.close();
              that.$message.error(err);
            });
          // this.$router.push({path: "./home"});
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>

<style scoped>
.contents {
  width: 100%;
  height: 100vh;
  background-image: url("../assets/login.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}
.login-content {
  width: 600px;
  height: 350px;
  display: flex;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -175px;
  margin-left: -300px;
}
.login-content div {
  flex: 1;
}
.login-left {
  background: rgba(255, 255, 255, 0.2);
}
.computer {
  margin-top: 80px;
}
.endfont {
  font-size: 27px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 48px;
  letter-spacing: 1px;
  color: #ffffff;
  font-family: MicrosoftYaHei-Bold;
  margin-top: 30px;
}
.backstage-management-system {
  font-family: MicrosoftYaHei-Bold;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 48px;
  letter-spacing: 1px;
  color: #ffffff;
}
.login-right {
  background: #fff;
}
.logo-img {
  margin-top: 30px;
  margin-bottom: 40px;
}
.submitForm {
  background-color: #b11f24;
  border-radius: 2px;
  border: 1px solid #b11f24;
  width: 220px;
}
.el-form-item__error {
  left: 42px !important;
}
</style>
